<template>
	<view class="content">
		<view class="myForm">
			<u--form labelPosition="left" :model="myForm" :rules="rules" ref="uForm">
				<u-form-item label="原始密码" labelWidth="80" prop="oldPwd" borderBottom ref="item1">
					<u--input clearable maxlength="20" minlength="6" type="password" v-model="myForm.oldPwd"  placeholder="请输入原始密码" border="none"></u--input>
					<!-- <u--input v-model="myForm.loginType" value="1" border="none"></u--input> -->
				</u-form-item>
				<u-form-item label="新密码" labelWidth="80" prop="newPwd" borderBottom ref="item2">
					<u--input clearable maxlength="20" minlength="6" type="password" v-model="myForm.newPwd" placeholder="请输入新密码" border="none"></u--input>
				</u-form-item>
				<u-form-item label="确认密码" labelWidth="80" prop="confirmPwd" borderBottom ref="item2">
					<u--input clearable maxlength="20" minlength="6" type="password" v-model="myForm.confirmPwd"  placeholder="请输入确认密码" border="none"></u--input>
				</u-form-item>
				<u-form-item class="myBtn">
					<u-button type="warning" shape="circle" text="登录" @click="changePwd"></u-button>
				</u-form-item>
			</u--form>
		</view>
	</view>
</template>

<script>
	import { setPwd } from '@/config/api.js'
	export default {
		data() {
			return {
				myForm: {
					oldPwd:'',
					newPwd:'',
					confirmPwd:''
				},
				rules: {
					'oldPwd': [
						{
							type: 'string',
							required: true,
							message: '请填写原始密码',
							trigger: ['blur', 'change']
						},{
							min: 6,
							max: 20,
							message: '密码长度必须在6-20个字符之间'
						}
					],
					'newPwd': [
						{
							type: 'string',
							required: true,
							message: '请填写新的密码',
							trigger: ['blur', 'change']
						},{
							min: 6,
							max: 20,
							message: '密码长度必须在6-20个字符之间'
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								//return uni.$u.test.mobile(value);
								//console.log("this.myForm.newPwd,{}, value ==>{}",this.myForm.newPwd,value)
								return this.myForm.oldPwd != value
							},
							message: '新密码不能与原始密码一样',
							// 触发器可以同时用blur和change
							trigger: ['change','blur'],
						}
					],
					'confirmPwd': [
						{
							type: 'string',
							required: true,
							message: '请填写确认密码',
							trigger: ['blur', 'change']
						},{
							min: 6,
							max: 20,
							message: '密码长度必须在6-20个字符之间'
						},
						{
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// uni.$u.test.mobile()就是返回true或者false的
							//return uni.$u.test.mobile(value);
							console.log("this.myForm.newPwd,{}, value ==>{}",this.myForm.newPwd,value)
							return this.myForm.newPwd == value
						},
						message: '确认密码与新密码不一致',
						// 触发器可以同时用blur和change
						trigger: ['change','blur'],
					}]
				},
			}
		},
		methods: {
			changePwd(){
				this.$refs.uForm.validate().then(res => {
					console.log('校验通过')
					let data ={
						oldPwd: this.myForm.oldPwd,
						newPwd: this.myForm.newPwd,
					}
					setPwd(data).then((res) =>{
						if(res.code == 200){
							uni.$u.toast('修改成功')
							uni.navigateBack();
						}
						else{
							uni.$u.toast(res.msg)
						}
					})
				})
			}
		}
	}
</script>

<style scoped>
	.content{
		padding: 20px;
	}
	
	.myBtn{
		margin-top: 30px;
	}
</style>
